<template>
    <div class="content" :style="contentStyle">
        <div class="bgOpacity"></div>
        <!--        移动意象-->
        <div class="articleMain" ref="articleMain">
            <div class="pointMap" v-for="(coordItem,cIndex) in pointMapList" :key="cIndex">
                <div class="coordItem" v-for="(item,index) in coordItem" :key="index"
                     :style="coordItemStyle(item,cIndex,index)" :ref="'coordItem' + cIndex[index]">
                    <div class="coordItem-img" :class="item.nature === 'begin' ? isLosShow ? 'los' : 'enlarge' : ''"
                         @touchstart.stop="item.nature === 'begin' && !isFinished? start(item,index,$event) : ''"
                         @touchmove.stop="item.nature === 'begin'&& !isFinished ? move(item,index,$event) : ''"
                         @touchend.stop="item.nature === 'begin' && !isFinished? end(item,cIndex,index,$event) : ''"
                         :style="item.nature === 'begin' ?coordItemRoverStyle(item) : item.nature === 'end' ? endStyle:''">
                        <img :src="item.imageUrl" alt="">
                    </div>
                        <!--障碍物提示-->
                    <div class="obstacle"
                         v-if="item.nature === 'obstacle' && isObstacleShow > 0"> </div>
                        <!--终点装饰物-->
                    <div class="target" v-if="item.nature === 'end'"></div>
                        <!--指引-->
                    <div class="coordArrow" v-if="item.nature === 'begin' && !isFinished && !isLosShow">
                        <div class="arrowItem" v-for="(arrowItem,arrowIndex) in coordArrow" :key = 'arrowIndex'
                             :style="arrowItemStyle(arrowItem,arrowIndex,item)"></div>
                    </div>
                </div>
            </div>
<!--            <Point v-if="!operated" :style="pointMoveStyle"/>-->
        </div>

        <div class="step">
           {{moveCount}}
        </div>
    </div>
</template>

<script>
    import { mixins } from "@/common/mixins/assignmentMixins.js"
    // import Point from "../point.vue"
    const $ = window.$
    export default {
        mixins: [mixins],
        data(){
            return{
                pointMapList: [[{},{},{}],[{},{},{}],[{},{},{}]],
                coordArrow: [
                    {'x':5,'y':1.5},
                    {'x':2,'y':4},
                    {'x':-1,'y':1.5},
                    {'x':2,'y':-1},
                ],
                isFinished: false,
                isLosShow: false,
                moveCount: 0,
                articleMoveX: 0,
                articleMoveY: 0,
                operated: false,
                pointMove: false,
            }
        },
        // components:{
        //     Point
        // },
        beforeMount() {
            if(!this.item.isFinish){
                if(this.index === this.activeIndex){
                    setTimeout(()=>{this.pointMove = true},2000)
                }
            } else {
                this.isFinished = true
                return
            }
        },
        created() {
            for (let i of Object.keys(this.item.pointMap)){
                this.$set(this.item.pointMap[i],'nature',i)
            }
                $.each(this.pointMapList, (i, v) => {
                $.each(v, index => {
                    for (let point of Object.values(this.item.pointMap)) {
                        if(point.x === i && point.y === index){
                            v[index] = JSON.parse(JSON.stringify(point))
                            if(v[index].nature === 'begin'){
                                this.articleMoveX = v[index].x
                                this.articleMoveY = v[index].y
                                const obstacleArr = Object.keys(this.item.pointMap).filter(item => {return item === 'obstacle'})
                                //确定障碍物位置
                                this.$set(v[index],'obstacleX',this.item.pointMap[obstacleArr].x)
                                this.$set(v[index],'obstacleY',this.item.pointMap[obstacleArr].y)
                                //确定终点位置
                                const endArr = Object.keys(this.item.pointMap).filter(item => {return item === 'end'})
                                this.$set(v[index],'endX',this.item.pointMap[endArr].x)
                                this.$set(v[index],'endY',this.item.pointMap[endArr].y)
                                //箭头
                                if(  v[index].x>=0 &&  v[index].x <=1) {
                                    this.$set(this.coordArrow[0],'arrowShow',true)
                                }
                                if(  v[index].x>=1 &&  v[index].x <=2) {
                                    this.$set(this.coordArrow[2],'arrowShow',true)
                                }
                                if(  v[index].y>=0 &&  v[index].y <=1){
                                    this.$set(this.coordArrow[1],'arrowShow',true)
                                }
                                if(  v[index].y>=1 &&  v[index].y <=2){
                                    this.$set(this.coordArrow[3],'arrowShow',true)
                                }
                            }
                        }
                    }
                })
            })
        },
        computed:{
            //手势提示
            pointMoveStyle(){
              return{
                  top: 1.8 + this.item.pointMap.begin.y * 5 + 'rem',
                  left: 1.8 + this.item.pointMap.begin.x * 6 + 'rem',
                  marginTop: '2.5rem',
                  marginLeft: '2rem',
                  width: '2rem',
                  transform: this.pointMove ? this.coordArrow[0].arrowShow ? 'translateX(6rem)': this.coordArrow[1].arrowShow ? 'translateY(5rem)'
                  : this.coordArrow[2].arrowShow ? 'translateX(-6rem)': this.coordArrow[3].arrowShow ? 'translateY(-5rem)' : '' : '',
                  translate: 'all 1s',
                  zIndex: '100'
              }
            },
            coordItemStyle(item,cIndex,index){
                return function (item,cIndex,index) {
                    return{
                        top: 1.8 + index * 5 + 'rem',
                        left: 1.8 + cIndex * 6 + 'rem',
                        transform: this.isFinished && item.nature === 'end' ? 'scale(1.3)'  : '',
                        transition: 'all 0.5s',
                    }
                }
            },
            coordItemRoverStyle(item){
                return function (item) {
                    return{
                        top: (item.y - this.articleMoveY) * 5 +'rem',
                        left: (item.x - this.articleMoveX) * 6 + 'rem',
                        transform: this.isFinished ? 'scale(1.3)' : "translate3d(" + item.moveX + "px," + item.moveY + "px,0)",
                        transition: 'all 0s',
                        filter: this.isLosShow ? 'grayscale(1)' : '',
                        zIndex: item.zIndex,
                    }
                }
            },
        //    结束之后意象消失
            endStyle(){
              return{
                  display: this.isFinished || this.isLosShow? 'none' : ''
              }
            },
        //    箭头
            arrowItemStyle(arrowItem,arrowIndex,item){
                return function (arrowItem,arrowIndex,item) {
                    return{
                        left: arrowItem.x + (item.x - this.articleMoveX) * 6 + 'rem',
                        top: arrowItem.y + (item.y - this.articleMoveY) * 5 +'rem',
                        transform: 'rotate(' + 90 * (arrowIndex - 1) +'deg)',
                        display: arrowItem.arrowShow ? 'block' : 'none',
                        filter: arrowItem.arrowError ? 'grayscale(1)' : '',
                    }
                }
            },

            //判断障碍物是否提示
            isObstacleShow(){
                return this.coordArrow.filter(item =>{return item.arrowError}).length
            }
        },
        methods:{
            start: function (item, index, event) {
                if (this.item.isFinish || this.isFinished || this.isLosShow) {
                    return
                }
                this.operated = true
                this.updateOperated({questionIndex:this.questionIndex,param:this.index})
                this.touchMusic()
                this.$set(item, 'startx', event.changedTouches[0].clientX)
                this.$set(item, 'starty', event.changedTouches[0].clientY)
                this.$set(item, 'zIndex',99)
                this.coordArrow.forEach(arrow =>{
                    this.$set(arrow,'arrowShow',false)
                    this.$set(arrow,'arrowError',false)
                })
            },
            move: function (item, index, event) {
                this.$set(item, 'moveX', event.changedTouches[0].clientX - item.startx)
                this.$set(item, 'moveY', event.changedTouches[0].clientY - item.starty)
                //不能超出大盒子
                const itemX = event.changedTouches[0].clientX,
                    itemY = event.changedTouches[0].clientY
                const ref = 'articleMain',
                    minX = this.$refs[ref].getBoundingClientRect().left,
                    minY = this.$refs[ref].getBoundingClientRect().top,
                    maxX = minX + this.$refs[ref].offsetWidth,
                    maxY = minY + this.$refs[ref].offsetHeight,
                    isCoord = itemX >= minX && itemX <= maxX && itemY >= minY && itemY <= maxY
                if (!isCoord) {
                    this.$set(item, 'moveX',0)
                    this.$set(item, 'moveY',0)
                }
            },
            end: function (item, cIndex, index, event) {
                this.moveCount++
                if(Math.abs(item.moveX) > Math.abs(item.moveY)) {
                    if(item.moveX > 0){
                        item.x >= this.pointMapList.length - 1 ? item.x = this.pointMapList.length - 1 :
                            item.obstacleX === item.x + 1 && item.obstacleY === item.y ? this.$set(this.coordArrow[0],'arrowError',true): item.x+=1
                    } else {
                        item.x <= 0 ? item.x = 0 :
                        item.obstacleX === item.x - 1 && item.obstacleY === item.y ? this.$set(this.coordArrow[2],'arrowError',true) : item.x-=1
                    }
                } else {
                    if(item.moveY > 0){
                        item.y >= this.pointMapList[cIndex].length - 1 ? item.y = this.pointMapList[cIndex].length - 1 :
                            item.obstacleY === item.y + 1 && item.obstacleX === item.x ? this.$set(this.coordArrow[1],'arrowError',true) : item.y+=1
                    } else {
                        item.y <= 0 ? item.y = 0 :
                        item.obstacleY === item.y - 1 && item.obstacleX === item.x ? this.$set(this.coordArrow[3],'arrowError',true) : item.y-=1
                    }
                }
                setTimeout(()=>{
                    this.$set(item, 'moveX',0)
                    this.$set(item, 'moveY',0)
                    this.$set(item, 'zIndex',98)
                    //判断下一步是否能移动
                    if( item.x>=0 && item.x <=1) {
                        this.$set(this.coordArrow[0],'arrowShow',true)
                    }
                    if( item.x>=1 && item.x <=2) {
                        this.$set(this.coordArrow[2],'arrowShow',true)
                    }
                    if( item.y>=0 && item.y <=1){
                        this.$set(this.coordArrow[1],'arrowShow',true)
                    }
                    if( item.y>=1 && item.y <=2){
                        this.$set(this.coordArrow[3],'arrowShow',true)
                    }
                //    判断是否成功
                    if( item.x === item.endX && item.y === item.endY){
                        if(this.moveCount === this.item.minStep){
                            this.sucMusic()
                            this.isFinished = true
                            this.sucMusic()
                            this.setFireworkPlay(event)
                            setTimeout(()=>{
                                this.updateAssignmentFinish({questionIndex:this.questionIndex,param:this.index})
                            },1000)
                            this.addAnswer({
                                id: this.item.id,
                                type: true
                            })
                        } else {
                            this.losMusic()
                            this.isLosShow = true
                            if(this.isSeedEntery){
                                setTimeout(()=>{this.$emit('nextAssignment')},600)
                            } else {
                                this.parseTextAudio({ text: '这不是最短路径哦' })
                                setTimeout(()=>{this.$emit("losShow")},1000)
                            }
                            this.addAnswer({
                                id: this.item.id,
                                type: false
                            })
                        }
                    }
                },0)
            },
        },
        watch: {
            activeIndex: function (activeIndex) {
                if (this.index === activeIndex) setTimeout(()=>{this.pointMove = true},2000)
            }
        }
    }
</script>

<style scoped lang="stylus">
@import '../../../common/stylus/content.styl'
@keyframes obstacleFlash
  0%
      opacity 1
      transform scale(1)
  50%
      opacity 0.5
      transform scale(0.5)
  100%
      opacity 1
      transform scale(1)
.bgOpacity
   $coord('WHLT',100%,100%,0,0)
   background url($urlTitle + 'assignment/image/breakthrough/半透明背景60.png')0 0/100% 100%
.articleMain
    position absolute
    $center('WHLT', 21rem, 19rem)
    margin-left -12.5rem
    padding-bottom 1rem
    box-sizing border-box
    background url($urlTitle + 'assignment/image/page17/路径背景.png')0 0/100% 100%
    .coordItem
        $coord('WHLT',5rem,4rem,0,0)
        background url($urlTitle + 'assignment/image/page17/路径小图.png')0 0/100% 100%
        .coordItem-img
            $coord('WHLT',100%,100%,0,0)
            $alignCenter()
            img
                max-width 60%
                max-height 60%
                z-index 9
                filter drop-shadow(2px 0px #fff) drop-shadow(-2px 0px #fff) drop-shadow(0px -2px #fff) drop-shadow(0px 2px #fff) drop-shadow(2px 2px 1px #0000004a)
        .obstacle
            position absolute
            $center('WHLT',3.5rem,3.5rem)
            background url($urlTitle + 'assignment/image/page17/障碍禁止图标.png')0 0/100% 100%
            animation obstacleFlash 1s infinite
            z-index 10
        .target
            position absolute
            $coord('WHLT',5rem,2rem,0rem,-1rem)
            background url($urlTitle + 'assignment/image/page17/终点图标装饰.png')0 0/100% 100%
        .arrowItem
            position absolute
            width 1rem
            height 1rem
            background url($urlTitle + 'assignment/image/page17/可移动路径显示.png')0 0/100% 100%

.step
    $coord('WHRB',8rem,5rem,2rem,2rem)
    transform translate(var(--X), var(--Y))
    background url($urlTitle + 'assignment/image/page17/当前步数背景.png')0 0/100% 100%
    font-size 2rem
    letter-spacing 0.2rem
    color #f009
    line-height 6.5rem
    text-align center
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff
</style>
